<template>
	<div class="main">
		<!-- <scroller> -->
		<div class="createTeastWrap flex-h">
			<div class="toper">
				<go-back aa='../chooseCourse/advanCourse'></go-back>
				<span>优势科目测评</span>

			</div>
			<div class="testBoxWrap flex1">
				<div class="testWrap">
					<div class="textbox">

						<p>优势学科自评，主要是辨识自己各个学科之间的强弱程度，为后期选科选课提供基础参考数据。该自评过程，主要分为六个维度，包括学科成绩、学科兴趣、学习方法、师资水平、家长建议和学生建议。
						</p>
						<p class="por">请分别在这六个维度上，对各备选科目的强弱程度打分，分值范围-5分至+5分，-5分代表在这个维度上这门学科非常不好，而+5分代表在这个维度上这门学科非常好。
							自评结果，为你所有备选科目由强到弱的排序情况。本决策共6题，预计完成时间8分钟，请在无外界干扰的情况下完成。</p>

					</div>





					<button class="testStart" @click="goesto">开始测试</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import ls from 'store2';

	import goBack from '~/components/goBack'
	import { getReport} from "~/api/selectCourse";
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			goBack
		},
		data() {
			return {
				types: 0,
				flag:false
			}
		},
		created() {
			this.commonJs.gologins();
			this.types = ls.get('testTypes');

		},
			mounted: function() {},
		methods: {
			getReport() {
				getReport(ls.get('userType')).then(res => {
					if (res.code === '0') {
						if (res.data.length === 0) {
							this.flag = true
						}
					}
				}).catch(() => {
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			goesto() {
				this.commonJs.gosto('chooseRecds')
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},

		}


	}
</script>

<style scoped lang="less">
	.createTeastWrap {
		width: 7.5rem;
		height: 100vh;
		background: #fff;
		overflow: hidden;
		flex-direction: column;

		.toper {
			width: 100%;
			height: 2.96rem;
			background: url('~/static/images/select courses_bg_youshikemu.png') no-repeat;
			background-size: 100% 100%;
			position: relative;

			span {
				position: absolute;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px -0.2rem 0.2rem 0px rgba(204, 204, 204, 0.3);
				padding: 0.4rem 0.4rem 0.3rem;
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				left: 0.3rem;
				bottom: -0.25rem;
				border-top-right-radius: 0.2rem;
				border-top-left-radius: 0.2rem;
			}
		}

		.testBoxWrap {
			width: 7.5rem;
			height: 100%;

			.testWrap {
				width: 6.9rem;
				height: 98%;
				position: relative;
				background: rgba(255, 255, 255, 1);
				// background: red;
				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				margin: 0rem auto 0;
				z-index: 2;

				.textbox {
					width: 100%;
					height: auto;
					padding: 0.3rem 0.4rem;
					box-sizing: border-box;

					p {
						font-size: 0.26rem;
						color: rgba(102, 102, 102, 1);
						line-height: 0.4rem;
					}

					.por {
						margin-top: 0.3rem;
					}
				}

				.testStart {
					width: 4.1rem;
					height: 0.88rem;
					background: linear-gradient(45deg, rgba(103, 189, 25, 1) 0%, rgba(181, 232, 97, 1) 100%);
					border-radius: 0.1rem;
					outline: none;
					border: none;
					line-height: 0.88rem;
					text-align: center;
					font-size: 0.34rem;

					font-weight: 600;
					color: rgba(255, 255, 255, 1);
					bottom: 0.4rem;
					display: block;
					left: 1.4rem;
					position: absolute;

				}
			}
		}


	}

	// 	.back {
	// 		width: 100%;
	// 		height: auto;
	// 		
	// // 		h2 {
	// // 			padding: 0 0.3rem;
	// // 			box-sizing: border-box;
	// // 			display: block;
	// // 			height: 0.8rem;
	// // 			font-size: 0.44rem;
	// // 
	// // 			font-weight: bold;
	// // 			color: rgba(34, 34, 34, 1);
	// // 			line-height: 0.8rem;
	// // 		}
	// 	}
</style>
